<!doctype html>
<!-- Our uiRouterSample module defined here -->
<html lang="en" ng-app="uiRouterSample">
<head>
<meta charset="utf-8">

<!-- using twitter bootstrap, but of course -->
<link rel="stylesheet" type="text/css" href="vendor/bootstrap.min.css">
<!-- styles for ng-animate are located here -->
<link rel="stylesheet" type="text/css" href="css/styles.css">

<!-- Include both angular.js and angular-ui-router.js-->
<script src="../lib/angular-1.2.14/angular.js"></script>
<script src="../lib/angular-1.2.14/angular-animate.js"></script>
<script src="../release/angular-ui-router.js"></script>

<!-- app.js declares the uiRouterSample module and adds items to $rootScope, and defines
         the "home" and "about" states
    -->
<script src="app/app.js"></script>

<!-- contacts.js declares the uiRouterSample.contacts module, and adds a number of contact
         related states 
    -->
<script src="app/contacts/contacts.js"></script>

<!-- contacts-service.js, and utils-service.js define services for use by the contacts 
         module.
    -->
<script src="app/contacts/contacts-service.js"></script>
<script src="common/utils/utils-service.js"></script>

<!-- could easily use a custom property of the state here instead of 'name' -->
<title ng-bind="$state.current.name + ' - ui-router'">ui-router</title>
</head>
<body>
	<div class="navbar navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container">

				<!-- ui-sref is a great directive for linking a state location with an anchor link.
             You should almost always use ui-sref instead of href on your links when you want
             then to navigate to a state. When this link is clicked it will take the application
             to the 'home' state. Behind the scenes the directive also adds the correct href attr
             and url. -->
				<a class="brand" ui-sref="home">ui-router</a>
				<ul class="nav">

					<!-- Here you can see ui-sref in action again. Also notice the use of $state.includes, which
             will set the links to 'active' if, for example on the first link, 'contacts' or any of
             its descendant states are activated. -->
					<li ng-class="{active: $state.includes('contacts')}"><a
						ui-sref="contacts.list">Contacts</a></li>
					<li ui-sref-active="active"><a ui-sref="about">About</a></li>
				</ul>

				<!-- Here is a named ui-view. ui-views don't have to be named, but we'll be populate this
             on from various different child states and we want a name to help us target. -->
				<p ui-view="hint" class="navbar-text pull-right"></p>
			</div>
		</div>
	</div>

	<!-- Here is the main ui-view (unnamed) and will be populate by its immediate children's templates
         unless otherwise explicitly named views are targeted. It's also employing ng-animate. -->
	<div ui-view class="container slide" style="padding-top: 80px;"></div>


	<hr>
	<pre>
      <!-- Here's some values to keep an eye on in the sample in order to understand $state and $stateParams -->
      $state = {{$state.current.name}}
      $stateParams = {{$stateParams}}
      $state full url = {{ $state.$current.url.source }}
      <!-- $state.$current is not a public api, we are using it to
           display the full url for learning purposes-->
    </pre>
</body>
</html>
